<template>
    <view style="padding: 30rpx">
        <view>
            <view style="font-weight: 700">国际化测试:</view>
            <text style="font-weight: 700; margin-right: 20px">{{
                $t('index.data.name')
            }}</text>
            <text>{{ $t('index.data.language') }}</text>
        </view>
        <view style="display: flex">
            <text style="font-weight: 700; margin-right: 20px">{{
                $t('nav.title')
            }}</text>
            <view
                style="flex: 1; display: flex; justify-content: space-between"
            >
                <text>{{ $t('nav.data.home') }}</text>
                <text>{{ $t('nav.data.setting') }}</text>
                <text>{{ $t('nav.data.helper') }}</text>
            </view>
        </view>

        <view class="radio" style="margin-top: 20px">
            <view style="margin-bottom: 20px">
                <text style="font-weight: 700">选择语言</text>
            </view>
            <radio-group name="radio" class="form-radio" @change="radioChange">
                <label class="radio-box" style="margin-right: 20px">
                    <radio value="zh-CN" :checked="value == 'zh-CN'" />
                    <text class="radio-text">中文</text>
                </label>
                <label class="radio-box">
                    <radio value="en-US" :checked="value == 'en-US'" />
                    <text class="radio-text">english</text>
                </label>
            </radio-group>
        </view>
        <view class="radio" style="margin-top: 20px"> 原生导航栏未绑定 </view>
        <!-- 读取超时 -->
        <form-item label="读取超时" class="setting-item">
            <view class="setting-item-content">
                <number-input
                    :value="readTimeOut"
                    @change="timeOutChange"
                ></number-input>
                <text>秒</text>
            </view>
        </form-item>
    </view>
</template>

<script>
import pagesData from '../../pages.json'
import formItem from '../../components/utils-ui/form-item.vue'
import numberInput from '@/components/utils-ui/input-number.vue'
import { mapState } from 'vuex'
export default {
    components: {
        'form-item': formItem, // 表单item
        'number-input': numberInput // 数字输入框
    },
    data() {
        return {
            value: 'zh-CN'
        }
    },
    computed: {
        ...mapState('global-config', {
            readTimeOut: 'readTimeOut'
        })
    },
    methods: {
        radioChange(evt) {
            this.$i18n.locale = evt.target.value
            // 设置页面标题
            uni.setNavigationBarTitle({
                title: 'sssss'
            })
            // 设置tabBar
            const tabBarText = this.$t('nav.data')
            const tabBar = ['home', 'setting', 'helper']
            tabBar.forEach((item, index) => {
                uni.setTabBarItem({
                    index: index,
                    text: tabBarText[item]
                })
            })
        },
        // 超时改变
        timeOutChange(e) {
            this.$store.commit('global-config/SET_READ_TIMEOUT', parseInt(e))
        }
    }
}
</script>

<style scoped lang="less">
.setting-item {
    background-color: #fff;
    margin: 30rpx -30rpx;
    padding: 0 30rpx;
    align-items: center;
    .setting-item-content {
        padding-left: 20rpx;
        display: flex;
        align-items: center;
    }
}
</style>
